<template>
  <el-dialog :close-on-click-modal="false" append-to-body :visible.sync="dialog" title="地图" width="1050px">
    <label>关键词：<input v-model="keyword"></label>
    <baidu-map
      :center="center"
      :zoom="zoom"
      style="height: 550px"
      :scroll-wheel-zoom="true"
      @ready="handler"
      @click="getClickInfo"
    >

      <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location" />
      <bm-city-list anchor="BMAP_ANCHOR_TOP_RIGHT" />
    </baidu-map>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="getMapPointFalse">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'Companyinfo',
  dicts: ['own_industry', 'company_size', 'company_type'],

  data() {
    return {
      location: '',
      keyword: '',
      dialog: false,
      zoom: 13,
      map: null,
      gisX: 112.848085,
      gisY: 35.494521,
      point: {},
      marker: {},
      center: { lng: this.gisX, lat: this.gisY },
      BMap: null

    }
  },
  methods: {
    getClickInfo(e) {
      this.map.clearOverlays()
      const point = e.point
      this.point = point
      const marker = new this.BMap.Marker(point)
      this.map.addOverlay(marker)
    },
    handler({ BMap, map }) {
      this.BMap = BMap
      this.map = map
      this.map.enableScrollWheelZoom(true)
      this.map.addControl(new BMap.NavigationControl())
      this.map.addControl(new BMap.ScaleControl())
      this.map.addControl(new BMap.OverviewMapControl())
      this.addPoint()
    },
    addPoint() {
      if (this.point) {
        this.map.clearOverlays()
      }
      this.point = new this.BMap.Point(this.gisX, this.gisY)
      this.map.centerAndZoom(this.point, 9)
      this.marker = new this.BMap.Marker(this.point)
      this.map.addOverlay(this.marker)
      var circle = new this.BMap.Circle(this.point, 6, {
        strokeColor: 'Red',
        strokeWeight: 6,
        strokeOpacity: 1,
        Color: 'Red',
        fillColor: '#f03'
      })
      this.map.addOverlay(circle)
    },
    getMapPointFalse() {
      this.$emit('change', this.point)
      this.dialog = false
    }

  }
}
</script>

<style scoped>

</style>
